<template>    
    <div id="news">    
       我是新闻组件   
        <span> vuex-store-count:{{this.$store.state.count}}</span>
       <button @click="increCount()">增加数量</button>
       <br>
        <ul v-for="item in list">
            <li>{{item.title}}</li>
        </ul>
    </div>

</template>


<script>
// var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

 // vuex的使用1. 引入store
    import store from '../vuex/store.js';

    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,    
               list:[],
            }
        },
        store,
        methods:{
            requestData(j){
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
                // 注意this指向,使用箭头函数就没有指向问题
                this.$http.get(api).then(response=>{
                    console.log(response);
                    this.list=response.body.result;  // 拼接数组
                    // 数据放在store里
                    this.$store.commit('addList',response.body.result);          
                },err=>{
                    console.log(err);
                })
            },
            increCount(){
                //改变vuex store里的数据
                this.$store.commit('incCount');/*触发mutations改变state里的数据*/
            }
        },
        mounted(){
            // 判断store里是否有数据
            var listData= this.$store.state.list;
            console.log('size:'+this.$store.state.list.length);
            if(listData.length>0){
                this.list=listData;
            }else{
                this.requestData();
            }
        }
    }

</script>





<style lang="scss" scoped>
    
    .list{

        li{
            height:3.4rem;

            line-height:3.4rem;

            border-bottom:1px solid #eee;

            font-size:1.6rem;

            a{

                color:#666;

                
            }
        }
    }

</style>